<template>
  <v-card rounded elevation="4" class="mx-2 my-0 px-1">
    <v-card-text>
      <v-form ref="form" v-model="valid">
        <v-row dense>
          <v-col cols="6">
            <v-text-field
              v-model="item.username"
              label="报告人姓名"
              outlined              
              :readonly="readonly"
            ></v-text-field>
          </v-col>
          
          <v-col cols="6">
            <v-radio-group v-model="item.sex" :readonly="readonly" row>
              性别
              <v-radio
                v-for="(item, i) in ['男', '女', '其他']"
                :key="i"
                :label="item"
                :value="item"
              ></v-radio>
            </v-radio-group>
          </v-col>
          <v-col cols="6">
            <DatePicker
              v-model="item.attrs.birth_date"
              label="出生年月日"              
              :withTime="false"
              :readonly="readonly"
            ></DatePicker>
          </v-col>
          <v-col cols="6">
            <v-text-field
              v-model="item.mobile"
              label="手机号"
              outlined              
              :readonly="readonly"
            ></v-text-field>
          </v-col>
        </v-row>
      </v-form>
    </v-card-text>
  </v-card>
</template>

<script>
  // 报告人信息
  import DatePicker from "@/components/datepicker/DatePicker"
  export default {
    name: "ReportUserInfo",
    components: {
      DatePicker,
    },
    props: {
      item: {
        type: Object,
        required: true,
      },
      readonly: {
        type: Boolean,
        default: false,
        required: false,
      },
    },
    data: () => ({
      valid: true,
    }),
  }
</script>
